<template>
  <div>
    <test-comp v-if="show"/>
  </div>
  <button @click="show = false">不展示testComp</button>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import TestComp from './components/TestComp.vue'

/**
 * 先从vue中导入以on打头的生命周期钩子函数
  在setup函数中调用生命周期函数并传入回调函数
  生命周期钩子函数可以调用多次
 * 8进3 - vue3组合式api
 * 使用方式导入，调用该函数，参数是回调函数，在回调函数中书写业务逻辑
 * vue2           vue3
 * created        setup
 * mounted        onMounted 函数
 * destoryed      onUnmounted 函数
 */
const fn = () => {
  console.log('发请求');
}
// fn()
onMounted( () => {
  console.log('111');
  fn()
})
onMounted(() => {
  console.log('222');
})
const show = ref(true)
</script>

<style lang="scss" scoped>

</style>